<template>
    <div style="width:100%;height:100%;display: flex;justify-content: space-around;align-items: center;">
        <div class="left-charts" id="firstSecond1">
            <p class="val"><countTo :startVal="isNaN(parseFloat(oldData.d2)) ? 0 : parseFloat(oldData.d2)" :decimals="1" :endVal='parseFloat(chartData.d2)' :duration='2000'></countTo></p>
            <p class="label-name">倍</p>
            <p class="label-name">计量-下料</p>
        </div>
        <div class="right-charts" id="firstSecond2">
            <p class="val"><countTo :startVal="isNaN(parseFloat(oldData.d3)) ? 0 : parseFloat(oldData.d3)" :decimals="1" :endVal='parseFloat(chartData.d3)' :duration='2000'></countTo></p>
            <p class="label-name">倍</p>
            <p class="label-name">计量-主挤</p>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts';
    import countTo from 'vue-count-to';

    export default {
        components: {countTo},
        props: {
            chartData: {
                type: Object,
                default () {
                    return {};
                }
            }
        },
        data () {
            return {
                oldData: {},
                example1: null,
                example2: null
            };
        },
        methods: {
            init1 () {
                this.example1 = echarts.init(document.getElementById('firstSecond1'));
                let option = {
                    /*tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },*/
                    color: ['#efc51b', '#0c1432'],
                    toolbox: {
                        feature: {
                            dataView: {show: false, readOnly: false},
                            magicType: {show: false, type: ['line', 'bar']},
                            restore: {show: false},
                            saveAsImage: {show: false}
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                    width: 8 // 这里是为了突出显示加上的
                                }
                            },
                            itemStyle: {
                                // borderColor: '#fff',
                                // shadowColor: 'rgba(0, 0, 0, 0.9)',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'}
                            ]
                        }
                    ]
                };
                this.example1.setOption(option);
                addEventListener('resize', () => {
                    this.example1.resize();
                });
            },
            init2 () {
                this.example2 = echarts.init(document.getElementById('firstSecond2'));
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: ['#ff7200', '#0c1432'],
                    toolbox: {
                        feature: {
                            dataView: {show: false, readOnly: false},
                            magicType: {show: false, type: ['line', 'bar']},
                            restore: {show: false},
                            saveAsImage: {show: false}
                        }
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                    width: 8 // 这里是为了突出显示加上的
                                }
                            },
                            itemStyle: {
                                // borderColor: '#fff',
                                // shadowColor: 'rgba(0, 0, 0, 0.9)',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'}
                            ]
                        }
                    ]
                };
                this.example2.setOption(option);
                addEventListener('resize', () => {
                    this.example2.resize();
                });
            }
        },
        watch: {
            chartData: {
                handler (newVal, oldVal) {
                    this.oldData = oldVal;
                },
                deep: true
            }
        },
        mounted () {
            // this.init1();
            // this.init2();
        }
    };
</script>
<style>
    .left-charts{
        width: 10.229166667vw;
        height: 10.229166667vw;
        background: url("../img/yellow-circle.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .right-charts{
        width: 10.229166667vw;
        height: 10.229166667vw;
        background: url("../img/orange-circle.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .label-name {
        font-size: 0.833333333vw;
        color: #fff;
    }
    .val {
        font-size: 1.354166667vw;
        color: #fff;
        font-weight: 700;
    }
</style>
